<template>
	<view class="main-Location">
		<!-- 字母区域 -->
		<view class="Location-Letter">
			<view hover-class="Click-Latter" @tap="getLetter('ScrollTop')">*</view>
			<view v-for="(l,i) in LatterName" :key="i" hover-class="Click-Latter" @tap="getLetter(l)"
				:style="{'color': LetterId === l ? '#4662D9' : '#000' }">{{l}}</view>
		</view>

		<view class="ynq-AutoLocation u_flex jcsb">
			<view class="ynq-AutoAddress">
				<text class="ynq ynq-dizhi"></text>
				<text>当前定位：</text>
				<text>{{CityName}}</text>
			</view>

			<view class="ynq-ReLocation u_flex mr-[10rpx]" @click="getLocationAuth">
				<u-icon name="reload" color="#000"></u-icon>
				<text class="ml5">重新定位</text>
			</view>
		</view>
		<scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId">
			<!-- 热门城市 -->
			<view class="ynq-HotCity" id="ScrollTop">
				<view class="ynq-HotCityTitle">
					<text class="ynq ynq-fire"></text>
					<text>热门城市</text>
				</view>
				<view class="ynq-HotCityList flex">
					<text class="rounded-[10rpx]" @tap="getStorage(item)" v-for="(item,index) in HotCity"
						:key="index">{{item}}</text>
				</view>
			</view>
			<!-- 城市列表 -->
			<view class="ynq-CityList">
				<block v-for="(item,index) in CityList" :key="index">
					<view class="ynq-CityLetter" :id="item.initial">{{item.initial}}</view>
					<view class="ynq-CityLine">
						<text @tap="getStorage(item_city.name)" v-for="(item_city,name_index) in item.list"
							:key="name_index">{{item_city.name}}</text>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		citydata
	} from '@/components/citydata.js'
	export default {
		data() {
			return {
				CityName: '成都',
				HotCity: ['北京', '深圳', '上海', '成都', '广州', '广东'],
				LatterName: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				CityList: citydata.city, //引用json数据
				LetterId: '',
			}
		},
		onLoad() {
			this.getCityName()
			// this.getLocationAuth()
		},
		methods: {
			//获取定位点
			getLetter(name) {
				this.LetterId = name
				// uni.pageScrollTo({
				// 	selector:'#'+name,
				// 	duration:300
				// })
			},
			//存储城市缓存
			getStorage(Name) {
				uni.setStorage({
					key: 'City_Name',
					data: Name
				})
				this.CityName = Name
				//跳转返回
				uni.navigateBack({
					url: '/pages/index/index'
				})
			},
			//获得城市缓存
			getCityName() {
				let _that = this;
				setTimeout(function() {
					uni.getStorage({
						key: 'City_Name',
						success(res) {
							_that.CityName = res.data
						}
					})
				}, 500)
			},
			//重新定位按钮
			getLocationAuth() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					success: function(res) {
						let locations = `${res.longitude},${res.latitude}`;
						uni.request({
							url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
							data: {
								key: '87400ef66791d249381bdb0e0b33db30',
								location: locations,
							},
							success: function(ress) {
								// console.log(ress.data.regeocode.addressComponent.city, '逆地理编码')
								that.CityName = ress.data.regeocode.addressComponent.city
								uni.setStorage({
									key: 'City_Name',
									data: ress.data.regeocode.addressComponent.city
								})
								uni.showToast({
									title: "获取定位成功",
									icon: "none"
								})
							},
							fail: function(err) {
								uni.showToast({
									title: "获取位置信息失败",
									icon: "none"
								})
							}
						});
					},
					fail: function(err) {
						uni.showToast({
							title: "获取位置信息失败",
							icon: "none"
						})
						console.error('获取位置信息失败', err);
					}
				});
				// uni.getSystemInfo({
				// 	success(res) {
				// 		console.log('getSystemInfo', res);
				// 		let locationEnabled = res.locationEnabled; //判断手机定位服务是否开启
				// 		let locationAuthorized = res.locationAuthorized; //判断定位服务是否允许微信授权
				// 		if (locationEnabled == false || locationAuthorized == false) {
				// 			//手机定位服务（GPS）未授权
				// 			uni.showModal({
				// 				title: '提示',
				// 				content: '请打开定位服务功能',
				// 				showCancel: false, // 不显示取消按钮
				// 				success: (res) => {
				// 					console.log('showModalres', res);
				// 				}
				// 			})
				// 		} else {
				// 			uni.authorize({
				// 				scope: "scope.userLocation", //授权的类型为地理位置	
				// 				success: (res) => {
				// 					uni.getLocation({
				// 						type: 'gcj02',
				// 						geocode: true,
				// 						isHighAccuracy: true,
				// 						accuracy: "best", // 精度值为20m
				// 						success: function(res) {
				// 							let lat = res.latitude;
				// 							let lng = res.longitude;
				// 							let key =
				// 							'81b583b55e04390260f7ea37da590270'; //申请地址：https://lbs.qq.com/dev/console/application/mine
				// 							uni.request({
				// 								url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' +
				// 									lat + ',' + lng + '&key=' +
				// 									key,
				// 								method: "GET",
				// 								success(ress) {
				// 									let data = ress
				// 									.data; //获取到所有定位的数据
				// 									let CityName = ress.data.result
				// 										.address_component.city
				// 									that.CityName = CityName
				// 									let Street = ress.data.result
				// 										.address_component.street
				// 									that.CityName = Street
				// 									uni.setStorage({
				// 										key: 'City_Name',
				// 										data: Street
				// 									})
				// 								},
				// 								fail() {
				// 									uni.showToast({
				// 										'title': '对不起，数据获取失败！',
				// 										'icon': 'none'
				// 									})
				// 								}
				// 							})
				// 						},
				// 					})
				// 				},
				// 			})
				// 		}
				// 	}
				// })
			},
		},
	}
</script>

<style lang="scss" scoped>
	.main-Location {
		height: 100vh;
		background-color: #fff;
	}

	.ynq-AutoLocation {
		// width: calc(100% - 40rpx);
		background: rgba(250, 250, 250, .5);
		padding: 20rpx 20rpx;

		text.ynq {
			font-size: 32rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 30rpx;
		}
	}

	.ynq-HotCity {
		padding: 20rpx;
	}

	.ynq-HotCityTitle {
		padding: 0rpx 0rpx;

		text.ynq {
			margin-right: 10rpx;
			color: #ff0000;
			font-size: 32rpx;
		}

		text {
			font-size: 30rpx;
		}
	}

	.ynq-HotCityList {
		padding: 20rpx 0 0 0;
		flex-wrap: wrap !important;

		text {
			width: 190rpx;
			display: inline-block;
			text-align: center;
			background: rgba(200, 200, 200, .2);
			font-size: 26rpx;
			margin: 10rpx;
			padding: 20rpx 10rpx;
		}
	}

	.Location-Letter {
		position: fixed;
		right: 5rpx;
		top: 180rpx;
		width: 30rpx;
		z-index: 100;

		view {
			display: block;
			width: 30rpx;
			text-align: center;
			height: 35rpx;
			line-height: 35rpx;
			font-size: 22rpx;
			transition: ease .3s;
			-webkit-transition: ease .3s;
		}
	}

	.ynq-CityList {
		padding: 0px 40rpx 0 20rpx;

		.ynq-CityLetter {
			line-height: 30rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-weight: bold;
			// border-bottom: 1px solid #f7f7f7;
			padding-left: 10rpx;
			margin-top: 20rpx;
			color: #1A1B1C;
		}

		.ynq-CityLine {
			// margin: 20rpx 0px;
            border-radius: 10rpx;
			text {
				display: block;
				line-height: 60rpx;
				padding: 10px 10rpx;
				border-bottom: 1px solid #efefef;
				font-size: 30rpx;
				color: #767676;
                
				// &:nth-child(even) {
				// 	background-color: rgba(200, 200, 200, .12);
				// }
			}
		}
	}

	.ynq-ScrollView {
		height: calc(100vh - 160rpx);
	}

	.Click-Latter {
		font-size: 30rpx !important;
	}

	.jcsb {
		justify-content: space-between;
	}

	.u_flex {
		display: flex;
	}
</style>